<div class="col-md-9">
    <div class="panel panel-bordered">
        <div class="panel-heading">
            <h3 class="panel-title">检验人员闲忙趋势</h3>
            <div class="panel-actions">
            </div>
        </div>
        <div class="panel-body padding-3 height-250" style="width:100%">
            <div id="inspect-operator-line" style="height: 100%">

            </div>
        </div>
    </div>
</div>
<div class="col-md-3">
    <div class="panel panel-bordered">
        <div class="panel-heading">
            <h3 class="panel-title">检验人员闲忙占比</h3>
            <div class="panel-actions">
            </div>
        </div>
        <div class="panel-body padding-3 height-250" style="width:100%">
            <div id="inspect-operator-pie" style="height: 100%">

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "#springUrl('/simulation/resource')",
            data: {"batchId": "$!{batchId}", "index": "7"},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var myChart1 = echarts.init(document.getElementById('inspect-operator-line'), 'macarons');
                    myChart1.setOption({
                        title: {
                            text: '检验人员闲忙趋势'
                            ,show:false
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                return params[0].name + "<br/>" + params[0].value + "%";
                            },
                            axisPointer: {
                                animation: false
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '6.5%',
                            bottom: '15%',
                            top:'12%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: d.data.date,
                            axisLabel:{
                                show:true,
                                textStyle:{
                                    color:"#595959"
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        grid: {
                            left: '3%',
                            right: '8%',
                            bottom: '15%',
                            top:'5%',
                            containLabel: true
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                formatter: function(value){
                                    var var1=value*1;
                                    return var1;
                                },
                                textStyle:{
                                    color:"#595959"
                                }
                            },
                            splitLine:{
                                show:true
                            },
                            splitArea: {
                                show:true,
                                areaStyle: {
                                    color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                                }
                            },
                            max: 100
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [{
                            name: '卸货人员',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: d.data.line
                        }]
                    });
                    var myChart2 = echarts.init(document.getElementById('inspect-operator-pie'), 'macarons');
                    myChart2.setOption({
                        title: {
                            text: '检验人员忙时占比分析',
                            x: 'center'
                            ,show:false
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            x : 'center',
                            y : 'bottom',
                            data:d.data.x1
                        },
                        series: [
                            {
                                name: '闲忙占比',
                                center: ['55%', '40%'],
                                type:'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: d.data.pie,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                                '#0fa99d','#d9d9d9','#4472c4','#c9eee7','#e7a14c',
                                                '#787473','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        //以下为是否显示，显示位置和显示格式的设置了
                                    }
                                }
                            }
                        ]
                    })
                }
            }
        });
    });
</script>